<script setup>
import LfDialog from './commonUI/LfDialog.vue'
import { useTopicManageStore } from '@/stores/TopicManageStore'
import LfFormItem from './commonUI/LfFormItem.vue'
import { useTopicDataQuery } from '@/composables/useTopicDataQuery'
import LfImageUpload from './commonUI/LfImageUpload.vue'
import { fetchJoinTopicApply } from '@/axios/api/topic'
const topicManageStore = useTopicManageStore()

const topicAvatarUploadRef = ref()
const topicBgUploadRef = ref()

const { refetch } = useTopicDataQuery(topicManageStore.topicSettingData.topicId)

const handleClose = () => {
  topicManageStore.hideTopicSetting()
}

const handleTopicNameChange = (value) => {
  topicManageStore.topicSettingData.value = value
}

const handleTopicNameOk = () => {
  if (topicManageStore.topicSettingData.label === '主题头像') {
    topicAvatarUploadRef.value.uploadImg((res) => {
      topicManageStore.handleTopicNameChange(res[0]).then((res) => {
        if (res.code === 0) {
          topicManageStore.hideTopicSetting()
          refetch()
        }
      })
    })
    return
  }

  if (topicManageStore.topicSettingData.label === '主题背景') {
    topicBgUploadRef.value.uploadImg((res) => {
      topicManageStore.handleTopicNameChange(res[0]).then((res) => {
        if (res.code === 0) {
          topicManageStore.hideTopicSetting()
          refetch()
        }
      })
    })
    return
  }

  if (topicManageStore.topicSettingData.label === '加入主题验证') {
    //     {
    //   "answer": "111",
    //   "question": "你是谁",
    //   "topicId": "702"
    // }
    fetchJoinTopicApply({
      topicId: topicManageStore.topicSettingData.topicId,
      answer: topicManageStore.topicSettingData.value,
      question: topicManageStore.topicSettingData.question,
    }).then((res) => {
      if (res.code === 0) {
        topicManageStore.hideTopicSetting()
        refetch()
      }
    })
    return
  }

  topicManageStore.handleTopicNameChange().then((res) => {
    if (res.code === 0) {
      topicManageStore.hideTopicSetting()
      refetch()
    }
  })
}
</script>

<template>
  <LfDialog
    :isShow="topicManageStore.isShowTopicSetting"
    width="400px"
    height="300px"
    :title="`${topicManageStore.topicSettingData.label == '加入主题验证' ? '' : '编辑'} ${
      topicManageStore.topicSettingData.label
    }`"
    @close="handleClose"
    @ok="handleTopicNameOk">
    <div class="flex-cc">
      <LfFormItem
        v-if="topicManageStore.topicSettingData.label === '主题名称'"
        class="w-full"
        required
        :label="topicManageStore.topicSettingData.label"
        :maxLength="10"
        placeholder="请输入主题名称"
        :value="topicManageStore.topicSettingData.value"
        @change="handleTopicNameChange" />

      <LfFormItem
        v-if="topicManageStore.topicSettingData.label === '主题描述'"
        class="w-full"
        required
        :label="topicManageStore.topicSettingData.label"
        type="textarea"
        :maxLength="20"
        placeholder="请输入主题描述"
        :value="topicManageStore.topicSettingData.value"
        @change="handleTopicNameChange" />

      <LfFormItem
        class="w-full"
        v-if="topicManageStore.topicSettingData.label === '申请问题'"
        required
        :label="topicManageStore.topicSettingData.label"
        type="textarea"
        :maxLength="100"
        placeholder="请输入申请加入主题需要回答的问题"
        :value="topicManageStore.topicSettingData.value"
        @change="handleTopicNameChange" />

      <LfImageUpload
        v-if="topicManageStore.topicSettingData.label === '主题头像'"
        title="上传头像"
        :maxCount="1"
        ref="topicAvatarUploadRef" />

      <LfImageUpload
        v-if="topicManageStore.topicSettingData.label === '主题背景'"
        title="上传背景"
        :maxCount="1"
        ref="topicBgUploadRef" />

      <LfFormItem
        class="w-full"
        v-if="topicManageStore.topicSettingData.label === '加入主题验证'"
        required
        :label="topicManageStore.topicSettingData.question"
        type="textarea"
        :maxLength="100"
        placeholder="请填写你的回答"
        :value="topicManageStore.topicSettingData.value"
        @change="handleTopicNameChange" />
    </div>
  </LfDialog>
</template>
